<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 相对定位 :相对于父级元素进行定位，没有父级按照body进行定位，不脱离文档流
			   绝对定位：按照页面左侧顶胶进行定位，在父级元素当中，首先按照父级定位，脱离文档流
			*/
			.d{
				width: 300px;
				height: 300px;
				background:#ffaaff;
				border-radius: 50%;
			    posit ion:relative;
				position: absolute;
			    top: 0;
				left: 0;
			}
			/* 需求：5个圆，每个圆颜色都不同
			 类选择器使用问题：heml语法：class="别名1 别名2 别名3....
			                  css语法：.别名1{}
			*/
		   .d1{
			   background-color: #ff557f;
		   }
		   .d2{
		   	   background-color: #ffb2de;
		   }
		   .d3{
		   	   background-color: #ffdeed;
		   }
		   .d4{
		   	   background-color: #ff74c3;
		   }
		   .d5{
		   	   background-color: #ff73b0;
		   }
		</style>
	</head>
	<body>
		<!-- 创建5个div -->
		<div class="d d1"></div>
		<div class="d d2"></div>
		<div class="d d3"></div>
		<p class="d d4"></p>
		<div class="d d5"></div>
	</body>
</html>